import { useNavigate } from "react-router-dom";
import { Layout, Menu, theme } from "antd";
const { Header, Content } = Layout;

const items = [
  { label: "DEX仪表盘", key: "/" },
  { label: "账户详情", key: "/owner" },
];

const Admin = (props) => {
  const navigate = useNavigate();
  function switchPage(meun) {
    const { key } = meun;
    navigate(key);
  }
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          items={items}
          onClick={switchPage}
        />
      </Header>
      <Content
        style={{
          padding: "0 50px",
        }}
      >
        <div
          className="site-layout-content"
          style={{
            background: colorBgContainer,
          }}
        >
          {props.children}
        </div>
      </Content>
    </Layout>
  );
};

export default Admin;
